<template>
  <div class="list">
    <div class="top">
      <!-- <planSearch @search="search"></planSearch> -->
      <!-- <el-button type="primary"
                 size="mini"
                 style="background-color:#0268F4"
                 @click="openDialog">船期申报</el-button> -->
      <div class="left">
        <div :class="activeIndex==null?'active':''"
             @click="changeTab(null)">全部订单</div>
        <div :class="activeIndex=='W'?'active':''"
             @click="changeTab('W')">待审核</div>
        <div :class="activeIndex=='A'?'active':''"
             @click="changeTab('A')">已审核</div>
      </div>
      <div class="middle"
           @click="changeTab('N')">
        委托回收站
      </div>
      <div class="right">
        <el-input placeholder="船名或计划号搜索"
                  clearable
                  v-model="condition.keyword"
                  class="input-with-select">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="find()"></el-button>
        </el-input>
      </div>
    </div>
    <div class="select">
      <el-dropdown @command="command">
        <span>
          {{text1}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item,index in list1"
                            :key="index">{{item.text}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="command1">
        <span>
          {{text2}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item in planstatus"
                            :key="item.key">{{item.value}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown @command="command2">
        <span>
          {{text3}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item in planTag"
                            :key="item.value">{{item.title}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <myTable :data="tableData"
             @del="del"
             @delInfo="find" @carPlan="carPlan" @driverCertificate="driverCertificate" :termList="termList"></myTable>
    <div class="page">
      <el-pagination background
                     :total="condition.total"
                     :page-size="condition.pageSize"
                     :page-sizes="[5, 10, 15, 20]"
                     :current-page.sync="condition.page"
                     @current-change="currentChange"
                     @size-change="handleSizeChange"
                     layout="total,sizes,prev, pager, next,jumper">
      </el-pagination>
    </div>
    <el-dialog title=""
               width="830px"
               :visible.sync="dialogVisible">
      <addCarTeam v-if="dialogVisible" :plan-no="planNo" :cst-cstmcd="cstCstmcd" @close="dialogVisible=false" :see="see" :type="carType"></addCarTeam>
    </el-dialog>
    <el-dialog title=""
               width="700px"
               :visible.sync="certificateShow">
      <driverC v-if="certificateShow && sonPageFresh" :certificateInfo="certificateInfo" @close="certificateShow=false" :cargoList="cargoList" :getQcode="getQcode" @getQcode="getQcode" :cargoCodecargoCode="cargoCodecargoCode"></driverC>
    </el-dialog>
  </div>
</template>

<script>
import myTable from './myTable.vue'
import addCarTeam from './moudel/addCarTeam.vue'
import driverC from './moudel/driverC.vue'
import moment from 'moment'
export default {
  name: 'shipPlanList',
  components: { myTable, addCarTeam,driverC },
  data() {
    return {
      carType:'goods',
      see:'',
      cstCstmcd:'',
      tableData: [],
      termList:[],
      dialogVisible: false,
      planNo:'',
      condition: {
        keyword: '',
        month: 3,
        page: 0,
        pageSize: 5,
        planTag: '',
        planstatus: '',
        // pageSize: 5,
        // page: 1,
        // total: 0,
      },
      id: '', //编辑
      cargoCodecargoCode:'',
      colors: [
        '#1075FF',
        '#13D55C',
        '#FF9000',
        '#2970FF',
        '#F56C6C',
        '#043AA7',
        '#00BAFF',
        '#00BAFF',
        '#DDDDDD',
      ],
      planstatus: [
        { key: null, value: '全部状态' },
        { key: 'P', value: '初始' },
        { key: 'M', value: '待确认' },
        { key: 'W', value: '待审核' },
        { key: 'R', value: '审核不通过' },
        { key: 'A', value: '审核通过' },
        { key: 'S', value: '下发成功' },
        { key: 'F', value: '下发失败' },
        { key: 'Y', value: '已支付' },
        { key: 'N', value: '取消' },
      ],
      activeIndex: null,
      list1: [
        {
          text: '全部日期',
          value: null,
        },
        {
          text: '本月',
          value: 1,
        },
        {
          text: '近三个月',
          value: 3,
        },
        {
          text: '近半年',
          value: 6,
        },
        {
          text: '全年',
          value: 12,
        },
      ],

      planTag: [
        { title: '全部类型', value: null },
        {
          title: '卸船直提',
          name: 'jUnloadLift',
          value: 'XCZT_G',
        },
        {
          title: '卸船入库',
          name: 'jUnloadIn',
          value: 'XCRK_G',
        },
        {
          title: '装船直装',
          name: 'jLoadLift',
          value: 'ZCZZ_G',
        },
        {
          title: '装船出库',
          name: 'jLoadIn',
          value: 'ZCCK_G',
        },
        {
          title: '进货',
          name: 'jImport',
          value: 'JH_G',
        },
        {
          title: '提货',
          name: 'jOutput',
          value: 'TH_G',
        },
      ],
      statusList: [
        { name: '全部类型', value: null },
        {
          name: '待审核',
          value: 0,
        },
        {
          name: '审核通过',
          value: 1,
        },
        {
          name: '审核未通过',
          value: 2,
        },
        {
          name: '预报',
          value: 3,
        },
        {
          name: '下发失败',
          value: 4,
        },
        {
          name: '取消',
          value: 5,
        },
        {
          name: '确报',
          value: 6,
        },
        {
          name: '在港',
          value: 7,
        },
        {
          name: '离港',
          value: 8,
        },
      ],
      text1: '近三个月',
      text2: '全部状态',
      text3: '全部类型',
      certificateShow:false,
      certificateInfo:{},
      cargoList:[],
      dataSave:{},
      sonPageFresh:true,
      termList:[],
    }
  },
  created(){
    this.term()
  },
  methods: {
    //作业码头
		term() {
			this.$api.term().then(res => {
				this.termList = res.data.data
			})
		},
    carPlan(item,perCd){
      /* 计划取消时 禁止 */
      if(['OCS','BCS','OCF','BCF','OC','BC'].includes(item.planstatus)){
        this.$message.warning('当前状态禁止配置车队计划')
        return
      }
      //console.log(data)
      this.see = !((perCd===item.cstTrnscomCd) && (('P'===item.pstatus||'W'===item.pstatus) 
      && !(['N'].includes(item.planstatus))))
      //console.log(this.see)
      this.planNo=item.planno
      this.cstCstmcd=item.cstTrnscomCd
      this.dialogVisible=true
    },
    driverCertificate(data,type){
      console.log('pppppppppppppppppppppppppppp',data,type)
      if(type == '0'){/* 生成二维码 */
        let params = {
          planNo:data.planno
        }
        this.$api
          .queryWithCargo(params)
          .then((res) => {
            if (res.success) {
              if(res.data.length){
                this.$api
                  .generateCode(data.planno)
                  .then((res) => {
                    if (res.success) {
                      console.log('----------',res)
                      this.$message.success('生成二维码成功！')
                      this.find()
                    }
                  })
                  .catch((err) => {
                    console.log(err);
                  })
              }else{
                this.$message.warning('暂无数据')
              }
            }
          })
          .catch((err) => {
            console.log(err);
          })
      }else{/* 查看凭证 */
        let params = {
          planNo:data.planno
        }
        this.$api
          .queryCargo(params)
          .then((res) => {
            if (res.success) {
              console.log('000000000000000000000',res);
              this.cargoList = res.data
              this.dataSave = JSON.parse(JSON.stringify(data))
              if(this.cargoList.length){
                this.getQcode(this.cargoList[0].cargoCode,false)
              }else{
                this.$message.warning('未查询到货种数据')
              }
            }
          })
          .catch((err) => {
            console.log(err);
          })
      }
    },
    getQcode(cargoCode,freshType){
      this.cargoCodecargoCode = cargoCode
        console.log('===========33333333333333',this.dataSave.planno)
        let params = {
          planNo:this.dataSave.planno,
          cargoCode:cargoCode
        }
        this.$api
          .viewCredentials(params)
          .then((res) => {
            if (res.success) {
              console.log('============',res)
              this.certificateInfo = this.dataSave
              this.certificateInfo.resData = res.data
              this.certificateShow = true
              if(freshType){
                this.sonPageFresh = false
                this.$nextTick(()=>{
                  this.sonPageFresh = true
                })
              }
            }
          })
          .catch((err) => {
            console.log(err);
          })
    },
    handleClick(row, e) {
      console.log(row)
      //this.dialog=true
      if ('see' !== e) {
        this.title = '编辑'
        this.see = false
      } else {
        this.title = '查看'
        this.see = true
      }
      localStorage.setItem('myDate', JSON.stringify(row))
      this.link()
    },

    openDialog() {
      this.id = ''
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    onSubmit() {
      this.dialogVisible = false
      this.find()
    },
    toShipOn(row, t) {
      this.$api.findOneBeforeBill({ id: row.id }).then((res) => {
        let voyId
        if (t == 'E') {
          voyId = res.data.evoyageId
        } else if (t == 'I') {
          voyId = res.data.ivoyageId
        }
        if (!voyId) {
          this.$message.error('不可操作')
          return
        }
        this.$api
          .billCheckJX({ voyId })
          .then((res) => {
            if (res.data) {
              let name = t == 'E' ? 'shipOn' : 'shipOff'
              this.$router.push({
                name,
                query: { id: row.id, ivoyageName: row.ivoyageName },
              })
            }
          })
          .catch((err) => {})
      })
    },
    edit(id) {
      this.dialogVisible = true
      this.id = id
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示')
        .then(() => {
          this.$api.delSchedules({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.find()
            }
          })
        })
        .catch(() => {})
    },
    cancel(id) {
      this.$api.cancelSchedules({ id }).then((res) => {
        this.$message.success('取消成功')
        this.find()
      })
    },
    find() {
      let par = JSON.parse(JSON.stringify(this.condition))
      par.page = par.page - 1
      this.$api.paginQuery(par).then((res) => {
        this.tableData = res.data.data
        this.condition.total = res.data.recordsTotal
      })
    },
    search(e) {
      this.condition = { ...this.condition, ...e }
      this.find()
    },
    currentChange(e) {
      this.condition.current = e
      this.find()
    },
    handleSizeChange(e) {
      this.condition.page = 1
      this.condition.pageSize = e
      this.find()
    },
    changeTab(v) {
      this.condition.planstatus = v
      this.activeIndex = v
      //this.condition.month = v
      this.find()
    },
    command(v) {
      // this.condition.etaMin = v.value[0]
      // this.condition.etaMax = v.value[1]
      this.condition.month = v.value
      this.text1 = v.text
      this.find()
    },
    command1(v) {
      this.activeIndex = null
      this.text2 = v.value
      this.condition.planstatus = v.key
      this.find()
    },
    command2(v) {
      this.activeIndex = null
      this.text3 = v.title
      this.condition.planTag = v.value
      this.find()
    },
  },

  computed: {},

  mounted() {
    // this.condition.etaMin = this.list1[1].value[0]
    // this.condition.etaMax = this.list1[1].value[1]
    this.find()
  },
}
</script>
<style lang='scss' scoped>
.list {
  background-color: #fff;
  padding: 16px 14px;
  min-height: 800px;
  position: relative;
}
.page {
  text-align: right;
  margin-top: 20px;
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.top {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
  .left {
    display: flex;

    div {
      margin-right: 10px;
      padding-bottom: 4px;
      cursor: pointer;
    }
  }
  .middle {
    cursor: pointer;
  }
}
.active {
  border-bottom: 2px solid #0f47b8;
  color: #0f47b8;
}
.select {
  margin-top: 10px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.el-dropdown {
  margin-right: 200px;
}
:deep.el-dialog__header {
  padding: 0;
}
:deep.el-dialog__body {
  padding: 20px;
}
</style>